<template>
  <div class="home">
    <div class="container">
      <!-- 地址导航 -->
      <div class="header" @click="toSearch">
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
        <div class="toMap" @click="toMap">
          <div class="toMap-txt">{{ city }}</div>

          <van-icon name="arrow-down" />
        </div>
      </div>

      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in res.banner" :key="item.id">
          <img class="banner" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 图标跳转页 -->
      <ul class="imgTo">
        <li
          class="imgToBox"
          v-for="item in res.channel"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <img class="img" :src="item.icon_url" alt="" />
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="container-mid">
      <!-- 品牌制造商直供 -->
      <div class="brandTxt" @click="toBrand">
        <p>品牌制造商直供</p>
      </div>

      <ul class="brandList">
        <li
          class="brandList-item"
          v-for="item in res.brandList"
          :key="item.id"
          @click="toBrandList(item.id)"
        >
          <div class="brandListTxt">
            <div>{{ item.name }}</div>
            <div class="b-txt">{{ item.floor_price }}起</div>
          </div>
          <img :src="item.new_pic_url" alt="" />
        </li>
      </ul>

      <!-- 新品首发 -->
      <img
        class="bannerImg"
        @click="toList(1)"
        src="../../assets/new.png"
        alt=""
      />
      <ul class="newGoods">
        <li
          v-for="item in res.newGoods"
          :key="item.id"
          class="newGoods-item"
          @click="toGoodsDetail(item.id)"
        >
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="newGoods-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="newGoods-brief">
            <span>{{ item.goods_brief }}</span>
          </div>
          <div class="newGoods-price">
            <span>${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>

      <!-- 人气精选 -->
      <img
        class="bannerImg"
        src="../../assets/hot.png"
        alt=""
        @click="toList(2)"
      />
      <ul class="newGoods">
        <li
          v-for="item in res.hotGoods"
          class="newGoods-item"
          @click="toGoodsDetail(item.id)"
        >
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="newGoods-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="newGoods-brief">
            <span>{{ item.goods_brief }}</span>
          </div>
          <div class="newGoods-price">
            <span>${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>

      <!-- 专题精选 -->
      <div class="topic">
        <div class="brandTxt">
          <p>专题精选</p>
        </div>
        <ul class="topicList">
          <li
            v-for="item in res.topicList"
            class="topicList-item"
            @click="toGoodsDetail(item.id)"
          >
            <img class="img" :src="item.scene_pic_url" alt="" />
            <div class="topicList-item-txt">
              <div class="topicList-item-txt-l">
                <span class="txt-t">{{ item.title }}</span>
                <span class="txt-b">{{ item.subtitle }}</span>
              </div>
              <span class="topicList-item-txt-r">{{ item.price_info }}起</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <div v-for="item in res.newCategoryList" :key="item.id">
        <div class="brandTxt">
          <div class="color-item">
           <span class="txt-l">{{ item.name }}</span> 
            <div class="line"
            :style="{
              'background-image':
                'linear-gradient(135deg,#' +
                randomColor() +
                ' 0%,' + '#' +
                randomColor() +
                ' 100%)',      
            }"
          ></div>
          <span class="txt-r">好物</span>
          </div>
          
          
        </div>

        <ul class="newGoodList">
          <li
            class="newGoodList-item"
            v-for="el in item.goodsList"
            :key="el.id"
            @click="toGoodsDetail(el.id)"
          >
            <img class="img" :src="el.list_pic_url" alt="" />
            <div class="goods-txt">
              <span class="txt-t">{{ el.name }}</span>
              <span class="txt-b">${{ el.retail_price }}</span>
            </div>
          </li>
          <li @click="toDetail(item.id)">
            <span>{{ item.name }}好物</span>
            <img src="@/assets/下一步.png" alt="" />
          </li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { start } from "@/api/home";
export default {
  name: "home",
  data() {
    return {
      value: "",
      res: [],
      city: "",
      goodsId: "",
    };
  },

  mounted() {
    var that = this;
    start().then((res) => {
      console.log(res);
      that.res = res;
    });
    //如果vuex里的cityDetail.name为真(有值),将值赋给当前城市名
    if (that.cityDetail.name) {
      that.city = that.cityDetail.name;
    } //没有,借助id查找当前城市,赋值给当前页面
    else {
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          // console.log(result);

          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(result);
            that.city = result.city;
          }
        });
      });
    }
  },
  computed: {
    ...mapState(["cityDetail"]),
  },
  methods: {
    toGoodsDetail(id) {
      this.goodsId = id;
      this.$router.push({
        path: "/home/goodsDetail",
        query: { id: this.goodsId },
      });
    },
    randomColor() {
      return Math.random().toString(16).slice(-6);
    },
    toMap() {
      this.$router.push("/home/map");
    },
    toSearch() {
      this.$router.push("/home/search");
    },
    toList(id) {
      this.$router.push({ path: "/home/list", query: { id: id } });
    },
    toDetail(id) {
      // this.id=id
      this.$router.push({ path: "/cartGory/list", query: { id: id } });
    },
    toBrand() {
      this.$router.push("/home/brand");
    },
    toBrandList(id) {
      this.$router.push({ path: "/home/brandList", query: { id: id } });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>>

